﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>前台用户列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	   $(function(){


	       //初始化树
           $("#ah").tree({
               url:"/user/getTree",
               method:"post",
               animate:true,
               checkbox:true
           });


           //修改dialog初始化
           $("#editdg").dialog({
               title: '用户修改',
               width: 700,
               height: 700,
               closed: true,
               cache: false,
               modal: true,
               iconCls: 'icon-save',
               buttons:[{
                            text:'提交',
                            iconCls:'icon-ok',
                            handler:function(){
                                $("#userForm").form("submit",{
                                    url:"http://127.0.0.1:8080/user/modify",
                                    onSubmit(param){
                                        param.aaa=111;
                                        param.bbb=222;


                                        var treeIds=new Array();


                                        var treeNode=$("#ah").tree("getChecked");

                                        for (var i = 0; i < treeNode.length; i++) {
                                            treeIds[i]=treeNode[i].id;
                                        }

                                        param.treeIds=treeIds;
                                    },
                                    success:function(result){
                                        alert(result+"修改成功");
                                        $("#userlist").datagrid("reload");
                                        $("#editdg").dialog("close");
                                    }
                                });
                            }
                        },
                        {
                            text:'关闭',
                            iconCls:'icon-cancel',
                            handler:function(){
                                $("#editdg").dialog("close");
                            }
                        }]
           });



	       $('#userlist').datagrid({  
      				title:'前台用户列表',  
      				iconCls:'icon-save',
                     //静态数据
      				// data:{
                      //     "total":10,
                      //     "rows":[
                      //         {"name":"张三","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"女"
                      //        ,"commpanyname":"全能家政服务","commpanytype":"生活","flag":"启用"},
                      //         {"name":"李四","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"女"
                      //        ,"commpanyname":"全能家政服务","commpanytype":"生活","flag":"启用"},
                      //         {"name":"王五","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"女"
                      //        ,"commpanyname":"期货服务","commpanytype":"生活","flag":"启用"},
                      //         {"name":"赵六","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"男"
                      //        ,"commpanyname":"期货服务","commpanytype":"商务","flag":"启用"},
                      //         {"name":"王七","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"男"
                      //        ,"commpanyname":"期货服务","commpanytype":"商务","flag":"启用"},
                      //         {"name":"刘八","nickname":"普通用户","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"男"
                      //        ,"commpanyname":"-","commpanytype":"-","flag":"启用"}
                      //     ]
                      // },
                    url:"/user/find",
      				columns:[
      				    [
                					       {field:'name',title:'姓名',width:100,align:'center'},  
                					       {field:'phone',title:'电话',width:100,align:'center'},  
                					       {field:'wechat',title:'微信号',width:100,align:'center'},
                                 {field:'qq',title:'QQ',width:200,align:'center'},
                                 {field:'commpanyname',title:'所属服务商',width:100,align:'center'},
                                 {field:'commpanytype',title:'服务商类型',width:100,align:'center'},
                                 {field:'flag',title:'状态',width:100,align:'center',formatter:function(value,row,index){
                                        return 1==value?"<font color='green'>启用</font>":"<font color='red'>禁用</font>"
                                     }},
                                 {field:'cz',title:'操作',width:200,align:'center',formatter:function(val,row){
                                        // console.log("------------------------")
                                        // console.log("val");
                                        // console.log(val);
                                        // console.log("row");
                                        // console.log(row);
                                        //  console.log("------------------------")
                                       return "<a href='javascript:showDg("+row.id+");'>查看</a>";
                                 }}
                          ]
                    ],
      				toolbar: "#tooldiv",  
      				pagination: true,
      				singleSelect:true
			});


          
          //初始化修改窗口  
         $('#dg').dialog({
			    title: '用户详情',
			    width: 700,
			    height: 700,
			    closed: true,
			    cache: false,
			    modal: true,
			    iconCls: 'icon-save'
			});

         //初始化查询按钮
         $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                 $("#userlist").datagrid("reload",
                                         {"name":$("#name").val(),
                                          "phone":$("#phone").val(),
                                          "wechat":$("#wechat").val(),
                                          "qq":$("#qq").val()
                                         });
            });
            
	   });


	   function modifyFlag(flag){
	       var user=$("#userlist").datagrid("getSelected");

	       if(user==null){
	           alert("选择一个用户");
	           return;
           }

	       $.ajax({
              url:"/user/modifyFlag",
              type:"GET",
              data:{
                  "id":user.id,
                  "flag":flag
              },
              success:function(){
                  $("#userlist").datagrid("reload");
              }
           });
       }

        //查询弹出方法
       function showDg(id){
             $('#dg').dialog("open");

             $.get("http://127.0.0.1:8080/user/findById",
                   {"id":id},
                   function(user){
                       $("input",$("div label:contains('姓名')").parent()).val(user.name);
                       $("input",$("div label:contains('昵称')").parent()).val(user.nickname);
                       $("input",$("div label:contains('电话')").parent()).val(user.phone);
                       $("input",$("div label:contains('微信号')").parent()).val(user.wechat);
                       $("input",$("div label:contains('QQ')").parent()).val(user.qq);
                       $("input",$("div label:contains('性别')").parent()).val("1"==user.sex?"男":"女");
                       $("input",$("div label:contains('注册时间')").parent()).val(user.createdate);
                       $("input",$("div label:contains('状态')").parent()).val("1"==user.flag?"启用":"禁用");
                   });
       }





       //打开修改dialog
       function openedit(){

           var user=$("#userlist").datagrid("getSelected");

           if(user==null){
               alert("选择一个用户");
               return;
           }

           //初始化动态下拉列表
           $("#cb").combobox({
               url:"/user/getComboBox",
               loadFilter:function(data){
                   console.log(data);
                   var obj={
                       "id":"",
                       "text":"请选择模块"
                   };
                   data.splice(0,0,obj);
                   return data;
               },
               valueField:'id',
               textField:'text'
           });

           //设置下拉列表默认值
           $("#cb").combobox("select",2);


           // $("#userForm").form("load","http://127.0.0.1:8080/user/findById?id="+user.id);

           $.get("http://127.0.0.1:8080/user/findById",
                 {"id":user.id},
                 function(user){
                     $("#userForm").form("load",{
                         id:user.id,
                         name:user.name.toUpperCase(),
                         nickname:user.nickname,
                         phone:user.phone,
                         wechat:user.wechat,
                         qq:user.qq,
                         sex:user.sex,
                         createdate:user.createdate,
                         flag:user.flag
                     });


                     $("#ah").tree({
                         onLoadSuccess:function(node,data){

                             $("#ah").tree("expandAll");

                             var ids=user.treeIds;

                             for (var i = 0; i < ids.length; i++) {
                                 var node=$("#ah").tree("find",ids[i]);

                                 if(node){
                                     $("#ah").tree("check",node.target);
                                 }

                             }
                         }
                     });





                 });




           $("#editdg").dialog("open");
       }


       function myformatter(date){
           var y = date.getFullYear();
           var m = date.getMonth()+1;
           var d = date.getDate();
           return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
       }
       function myparser(s){
           if (!s) return new Date();
           var ss = (s.split('-'));
           var y = parseInt(ss[0],10);
           var m = parseInt(ss[1],10);
           var d = parseInt(ss[2],10);
           if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
               return new Date(y,m-1,d);
           } else {
               return new Date();
           }
       }


	</script>
</head>
<body>
  <div id="tooldiv">
      <input type="text" id="name"  placeholder="请输入查询用户名"/>
      <input type="text" id="phone" placeholder="请输入查询电话"/>
      <input type="text" id="wechat" placeholder="请输入查询微信"/>
      <input type="text" id="qq"  placeholder="请输入查询QQ"/>
      <a id="submit_search">搜索</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="modifyFlag('0');" >禁用</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="modifyFlag('1');">启用</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openedit();">修改</a>
  </div>
  <table id="userlist"></table>
    <div id="dg">
           <div align="center" style="margin-top: 30px">
            <div style="margin-bottom:20px">
             <img src="./images/tx.jpg" alt="" style="width: 150px; height:150px;" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'姓名:'" readonly="true" value="" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'昵称:'" readonly="true" value=""/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'电话:'" readonly="true" value=""/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'微信号:'" readonly="true" value=""/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'QQ:'" readonly="true" value=""/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'所属服务商:'" readonly="true" value="" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务商类型:'" readonly="true" value=""/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'性别:'" readonly="true" value=""/>
            </div> 
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'注册时间:'" readonly="true" value=""/>
            </div> 
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'状态:'" readonly="true" value=""/>
            </div> 
        </div>
   </div>




  <div id="editdg">
      <div align="center" style="margin-top: 30px">

          <form id="userForm" method="post">
              <input type="hidden" name="id"/>
              <div style="margin-bottom:20px">
                  <input class="easyui-textbox" name="name"  style="width:50%" data-options="label:'姓名:'"/>
              </div>
              <div style="margin-bottom:20px">
                  <input class="easyui-textbox" name="nickname"  style="width:50%" data-options="label:'昵称:'"/>
              </div>
              <div style="margin-bottom:20px">
                  <input class="easyui-textbox" name="phone"  style="width:50%" data-options="label:'电话:'" />
              </div>
              <div style="margin-bottom:20px">
                  <input class="easyui-textbox" name="wechat"  style="width:50%;" data-options="label:'微信号:'"/>
              </div>
              <div style="margin-bottom:20px">
                  <input class="easyui-textbox" name="qq"  style="width:50%;" data-options="label:'QQ:'"/>
              </div>
              <div style="margin-bottom:20px">
                  <table style="width: 51%">
                          <td valign="top" style="width: 80px">
                              <label>性别：</label>
                          </td>
                          <td>
                              <input type="radio" name="sex" value="1"/><span>男</span>
                              <input type="radio" name="sex" value="0"/><span>女</span>
                          </td>
                  </table>
              </div>
              <div style="margin-bottom:20px">
                  <input  class="easyui-datebox" name="createdate" style="width:50%;" data-options="label:'注册时间:',formatter:myformatter,parser:myparser" />
              </div>
              <div style="margin-bottom:20px">
                  <select class="easyui-combobox" name="flag" label="状态：" style="width: 50%">
                        <option value="-1">请选择状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                  </select>
              </div>

              <div style="margin-bottom:20px">
                  <select class="easyui-combobox" id="cb" name="language" label="所属模块:" style="width:50%" data-options="multiple:false" >
                  </select>
              </div>


              <div style="margin-bottom:20px">
                  <table style="width:48%">
                      <td valign="top" style="width:50px">
                          权限:
                      </td>
                      <td><ul id="ah"></ul></td>
                  </table>
              </div>

          </form>
      </div>
  </div>
</body>
</html>